<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>编辑文章</title>
    {include file="public/resource/layui_css" /}
    <link rel="stylesheet" href="/static/admin/css/style.css">
    <script type="text/javascript" charset="utf-8" src="/static/third/ueditor-v1.4.3/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="/static/third/ueditor-v1.4.3/ueditor.all.min.js"> </script>
    <script type="text/javascript" charset="utf-8" src="/static/third/ueditor-v1.4.3/lang/zh-cn/zh-cn.js"></script>
</head>

<body>
    <!-- 内容主体区域 -->
    <div class="my-form">
        <fieldset class="layui-elem-field layui-field-title">
            <legend>编辑文章</legend>
        </fieldset>
        <form class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">标题</label>
                <div class="layui-input-block my-input">
                    <input type="text" name="title" lay-verify="required" autocomplete="off" placeholder="请输入名称" class="layui-input my-text" value="{$detail.title}">
                    <input type="hidden" name="id" value="{$detail.id}">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">缩略图</label>
                <div class="layui-input-block">
                    <div class="layui-inline">
                        <div class="layui-upload-drag" id="uploadImage">
                            <i class="layui-icon"></i>
                            <p>点击上传，或将图片拖拽到此处</p>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <div class="{empty name='detail.thumb'}layui-hide {/empty}upload-view" id="uploadView">
                            <img src="{$detail.thumb}">
                        </div>
                    </div>
                    <input type="hidden" name="thumb" id="thumb" value="{$detail.thumb}">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">分类</label>
                <div class="layui-input-block my-min-input my-select">
                    <select name="cid" lay-verify="required" lay-search="">
                        <option value="">请选择分类</option>
                        {volist name='categoryList' id='one'}
                        <option value="{$one.id}" {eq name="$detail.cid" value="$one.id"}selected="selected"{/eq}>{$one.name}</option>
                        {volist name='one.childrenList' id='item'}
                        <option value="{$item.id}" {eq name="$detail.cid" value="$item.id"}selected="selected"{/eq}> | - {$item.name}</option>
                        {/volist}
                        {/volist}
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">描述</label>
                <div class="layui-input-block my-input">
                    <textarea name="description" placeholder="请输入描述" class="layui-textarea">{$detail.description}</textarea>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">内容</label>
                <div class="layui-input-block">
                    <script id="editor" type="text/plain" style="height:500px;"></script>
                </div>
                <textarea id="content" style="display: none">{$detail.content|raw}</textarea>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">标签</label>
                <div class="layui-input-block my-input">
                    <div id="tags-show" class="tags-show">
                        {volist name='detail.tags' id='tag'}
                        <span id="one-tag" style="margin-bottom: 10px; margin-right: 10px; display: inline-block;"><span class="layui-badge layui-bg-green" style=" padding: 6px;">{$tag.name}<i class="layui-icon layui-icon-close" id="delete-tag" onclick="deleteTag(this, '{$tag.name}')" style="font-size: 12px; margin-left: 2px;"></i></span></span>
                        {/volist}
                    </div>
                    <input id="tags-input" type="text" name="tags" autocomplete="off" placeholder="请输入标签按回车确认" class="layui-input my-text">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">是否原创</label>
                <div class="layui-input-block">
                    <input type="checkbox" name="original" {eq name="$detail.original" value="1"}checked{/eq} lay-skin="switch" lay-text="是|否">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">推荐到首页</label>
                <div class="layui-input-block">
                    <input type="checkbox" {eq name="$detail.recommend" value="1"}checked{/eq} name="recommend" lay-skin="switch" lay-text="是|否">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="button" class="layui-btn" lay-submit="" lay-filter="addArticle">保 存</button>
                </div>
            </div>
        </form>
    </div>
    {include file="public/resource/layui_js" /}
    <script>
        let ue = UE.getEditor('editor');
        let tags = [];
        {volist name='detail.tags' id='tag'}
        tags.push('{$tag.name}');
        {/volist}
        layui.use(['form', 'upload', 'element', 'laydate', 'layer'], function () {
            let $ = layui.jquery, form = layui.form, layer = layui.layer, upload = layui.upload;
            ue.ready(function() {
                ue.setContent($("#content").val());

            });
            $("#tags-input").keyup(function(event) {
                if(event.keyCode === 13){
                    let tag = $("#tags-input").val().trim();
                    if (tags.includes(tag) || tag === '') {
                        return false;
                    }
                    tags.push(tag);
                    let tagContent = '<span id="one-tag" style="margin-bottom: 10px; margin-right: 10px; display: inline-block;"><span class="layui-badge layui-bg-green" style=" padding: 6px;">' + tag + '<i class="layui-icon layui-icon-close" id="delete-tag" onclick="deleteTag(this, \''+tag+'\')" style="font-size: 12px; margin-left: 2px;"></i></span></span>';
                    $("#tags-show").append(tagContent);
                    $("#tags-input").val('');
                    return false;
                }
            });
            // 上传图片
            upload.render({
                elem: '#uploadImage'
                ,url: '/admin/upload/image?w=400&h=230' //此处配置上传接口
                ,accept: 'images' //图片文件
                ,field: 'uploadImage'
                , before: function () {
                    layer.load(); //上传loading
                }
                ,done: function(result){
                    layer.closeAll('loading'); //关闭loading
                    if (result.code === 0) {
                        layer.msg('图片上传成功');
                        $("#thumb").val(result.data.url);
                        layui.$('#uploadView').removeClass('layui-hide').find('img').attr('src', result.data.url);
                    } else {
                        layer.msg("图片上传失败")
                    }
                }
            });
            // 监听提交
            form.on('submit(addArticle)', function (data) {
                let content = ue.getContent();
                if (content === '') {
                    layer.msg(content + "请输入内容");
                    return false;
                }
                data = data.field;
                data['content'] = content;
                if (tags.length > 0){
                    data['tags'] = tags.join(',')
                }
                if (data.recommend === 'on') {
                    data.recommend = 1;
                } else {
                    data.recommend = 0;
                }
                if (data.original === 'on') {
                    data.original = 1;
                } else {
                    data.original = 0;
                }
                delete data.uploadImage;
                delete data.editorValue;
                $.ajax({
                    type: 'post',
                    url: '/admin/article/save',
                    dataType: 'json',
                    contentType: "application/json; charset=utf-8",
                    data: JSON.stringify(data),
                    success: function (result) {
                        if (result.code === 0) {
                            layer.msg('编辑成功。');
                            setTimeout(function () {
                                location.href="/admin/article";
                            }, 1000);
                        } else {
                            layer.msg(result.msg);
                        }
                    }
                });
                return false;
            });
        });
        function deleteTag(obj, tag) {
            obj.parentElement.parentElement.remove();
            tags.splice(tags.indexOf(tag), 1);
        }
    </script>
</body>

</html>